<template>
  <div id="app">
    <loading :isShow="showOrNot" @toKV="goToKV" />
    <pageKV :isShow="showOrNot" @toPP="goToPP" />
    <pagePlay :isShow="showOrNot" :start="gameStart" @toFN="goToFN" @sendData="getPPData" />
    <pageFinal :isShow="showOrNot" :isSubMerge="isMerge" @toOrigin="goToOrigin" :userData="dataFromPP" />
    <MusicPlayer :isShow="showOrNot" />
    <rotate />
  </div>
</template>

<script>
import Loading from './components/loading/loading'
import pageKV from './components/page-kv/pageKV'
import pagePlay from './components/page-play/pagePlay'
import pageFinal from './components/page-final/pageFinal'
import MusicPlayer from './components/musicplayer/music-player'
import Rotate from './components/rotate/Rotate'

export default {
  name: 'app',
  components: {
    Loading,
    pageKV,
    pagePlay,
    pageFinal,
    Rotate,
    MusicPlayer
  },
  data () {
    return {
      showOrNot: {
        isLDShow: true,
        isKVShow: false,
        isPLShow: false,
        isFNShow: false
      },
      gameStart: false,
      // 组件
      dataFromPP: {},
      isMerge:false
    }
  },
  methods: {
    goToKV () {
      this.showOrNot.isLDShow = false
      this.showOrNot.isKVShow = true
    },
    goToPP () {
      this.showOrNot.isKVShow = false
      this.showOrNot.isPLShow = true
    },
    goToFN () {
      this.showOrNot.isFNShow = true
      this.showOrNot.isPLShow = false

      this.isMerge=true
    },
    goToOrigin () {
      this.showOrNot.isLDShow = true
      this.showOrNot.isFNShow = false
    },
    // 从 play page 中获取结果
    getPPData (msg) {
      this.dataFromPP = msg
    }
  }
}
</script>

<style lang="less">
@import './assets/reset.less';
#app {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>
